<template>
   <div class="detail">

               <div style="background-color: #ffffff;height: 50px;;width: 100%;margin-top:-3%;float: left;">
               <div style="width:70%;height:40px;background-color: #dcdcdc;margin-left: 20%;margin-top:6%;">
               <img style="margin:auto;width:35%;margin-top:2%;" src="../assets/top/01.png">   
              </div>
               <div class="fenge1" style="margin-top:2%;"></div>
               </div>

               <div style="width:100%;height: auto;float: left;margin-top:9%;">
                   <div class="cri" style=" position: absolute;background-color: #339933;border:#339933;margin-left: 5%;"></div>

                    <div name="xk" id="xk" v-model="xk" class="xuekeke" style="margin-top:4%;margin-right:36%;font-weight:bold;text-align:center;">网页设计</div>
    
                    <mt-button size="small" class="dbtn" style="margin-top:-8%;margin-left:63%;color:#339933;background-color:white;border-color:#339933;border-width:1px;position: absolute;" @click="guanzhu3()">+ 关注</mt-button> 
                    <div name="gz" id="gz" v-model="gz" class="jiajia" style="margin-top:4%;margin-right:9%;text-align:center"><p>学习HTML/JAVASCRIPT/CSS语言等网页前端语言。</p></div>
                
               </div>

               <div style="float: left;width: 100%;">

               <mt-navbar class="page-part" v-model="selected">
                  <mt-tab-item id="1">动态</mt-tab-item>
                  <mt-tab-item id="2">精华</mt-tab-item>
                  <mt-tab-item id="3">全部问题</mt-tab-item>           
              </mt-navbar>
               <div class="fenge" style="opacity:0.5;"></div>
               <mt-tab-container v-model="selected">

<!--动态-->
        <mt-tab-container-item id="1" style="text-align:left">

         <div v-for="(item,index) in book_name" class="imgDiv" @click="togo(index)">      
                    <div class="cricle"></div>
                    <div class="hua" style="margin-top:5%;" >{{book_name[index]}}</div>        
                    <div class="wenwen" style="margin-top:15%;margin-left:5%" >{{book_question[index]}}</div> 
                    <div class="neirong" style="margin-top:1%;">{{book_answer[index]}}</div>
                    <div class="xiabiao">15 赞同 | 6评论 | 关注问题</div>
                    <div class="fenge" style="margin-top:4%;opacity:0.5;"></div>                                 
         </div>

      </mt-tab-container-item>

<!--精华-->
      <mt-tab-container-item id="2" style="text-align:left">
            <div v-for="(item,index) in book_name1" class="imgDiv" @click="togo1(index)">      
                    <div class="cricle"></div>
                    <div class="hua" style="margin-top:5%;" >{{book_name1[index]}}</div>        
                    <div class="wenwen"style="margin-top:15%;margin-left:5%" >{{book_question1[index]}}</div> 
                    <div class="neirong" style="margin-top:1%;">{{book_answer1[index]}}</div>
                    <div class="xiabiao">15 赞同 | 6评论 | 关注问题</div>
                    <div class="fenge" style="margin-top:4%;opacity:0.5;"></div>                                 
         </div>
      </mt-tab-container-item>

<!--全部问题-->
      <mt-tab-container-item id="3" style="text-align:left">
        <div v-for="(item,index) in book_name1" class="imgDiv" @click="togo2(index)">      
                    <div class="cricle"></div>
                    <div class="hua" style="margin-top:5%;" >{{book_name2[index]}}</div>        
                    <div class="wenwen" style="margin-top:15%;margin-left:5%" >{{book_question2[index]}}</div> 
                    <div class="neirong" style="margin-top:1%;">{{book_answer2[index]}}</div>
                    <div class="xiabiao">15 赞同 | 6评论 | 关注问题</div>
                    <div class="fenge" style="margin-top:4%;opacity:0.5;"></div>                                 
         </div>
      </mt-tab-container-item>
    </div>

              

   </div>
</template>

<script>
//登录拦截
import {Toast} from "mint-ui";
import axios from 'axios';
import {mapMutations} from "vuex"
import  {mapState} from "vuex"

var gz = document.getElementById("gz");
var xk = document.getElementById("xk");
var username = document.getElementById("username");

    export default{
        data(){
            return{
                xk:"网页设计",
                gz:"学习HTML/JAVASCRIPT/CSS语言等网页前端语言。",
                username:"",
                 selected: '1',
                book_name:[
                    "巴拉巴拉"
                ],
                 book_question:[
                    " div中如何设置文字居中？"
                ],
                 book_answer:[
                    "可以用line-height行高来设置文字的垂直居中，水平居中就用<center>这个标签或者margin:0 auto;这个样式或者楼上讲..."

                
                ],
                  book_engName:[
                    "booo_2"
                ],

                 book_name1:[
                     "巴拉巴拉"
                ],          
                book_question1:[
                    " div中如何设置文字居中？"
                ],
                 book_answer1:[
                    "可以用line-height行高来设置文字的垂直居中，水平居中就用<center>这个标签或者margin:0 auto;这个样式或者楼上讲..."
                ],
                book_engName1:[
                    "booo_2",
                ],

                 book_name2:[
                     "巴拉巴拉"
                ],          
                book_question2:[
                    " div中如何设置文字居中？"
                ],
                 book_answer2:[
                    "可以用line-height行高来设置文字的垂直居中，水平居中就用<center>这个标签或者margin:0 auto;这个样式或者楼上讲..."
                ],
                book_engName2:[
                    "booo_2","booo_2","booo_3","booo_4","booo_5","booo_6","booo_7","booo_8"
                ]
            }
        },
        methods:{
             getbook_ico(i){
                return this.book_ico[i];
            },
            go(id){
                this.$store.commit("changeStyle",2.5);
                //id在store中找到
                this.$store.commit("choosebooks",id);

                this.$router.push({path:"booksView"});
            },
            togo(index){
                var id=this.book_engName[index];
                this.go(id);
            },
            togo1(index){
                var id=this.book_engName[index];
                this.go(id);
            },
            togo2(index){
                var id=this.book_engName[index];
                this.go(id);
            },
             //获取用户名
        mounted(){
            this.getUser();

        },
         ...mapMutations([
                'changeBtn' // 映射 this.increment() 为 this.$store.commit('increment')
            ]),
            //获取用户名
             getUser(){
                var _this = this;
                //判断是否登录
                this.$http.post('/users/user').then(function (res) {
                    if (res.data.result == 0) {
                        _this.username = '';
                        console.log('用户未登录')
                    } else if (res.data.result == 1) {
                        console.log('已登录')
                        console.log(res.data);
                        _this.username = res.data.username;
                        _this.sid = res.data.sid;                  
                        console.log(_this.username);
                       

                    }
                    
                })                 
               
            },

            guanzhu3:function(){
              //存入mongo
                var params = new URLSearchParams();
                params.append('gz',this.gz );
                params.append('username',this.username );
                 params.append('xk',this.xk );
                var _this = this
                //判断是否登陆
                this.$http.post('/users/user').then(function (res) {
                    if (res.data.result == 0) {
                        _this.username = '';
                        console.log('未登录')
                         _this.$router.push({path:'/login/login',query:{username:res.data.username}})//未登录返回登录页面
                    } else if (res.data.result == 1) {
                        alert('关注成功')//已登录 点击显示关注成功
                //上传到数据库guanzhu表
                axios.post('/users/guanzhu',params).then(function (res) {
                    if(res.data.result){
                    //成功显示  
                        _this.username=res.data.username;//判断usernanme
                        _this.$router.push({path:'/top',query:{username:res.data.username}})
                        _this.changeBtn();

                    }else{
                        alert("")
                    }
                }).catch(function (err) {
                    console.log(err);
                })
                    }
                })
              },
        }
    }
</script>

<style>
    .detail{
        background-color:#ffffff;
        height: auto;
       
        padding-bottom:200%;
        margin-bottom:-18%;
    }



    .detail .imgDiv {
        width:100%;     
        
        float: left;
        
    }

    .detail img {
        
        width: 29.5%;
        height: auto;
        margin-left:-65%; 
        
    }

  
    .detailauthor {
       margin-top: 7%;
       font-family: 华文行楷;
       font-size: 1em;
        color:#FF9900;

        
    }

    .detailname {
       margin-top:-35%; 
       font-family: 华文行楷;
      
       font-size: 1.5em;
       color:#FF9900;
        
    }


    .dbtn {
        position: relative;
        color:#339933;background-color:white;border-color:#339933;border-width:1px;    
        left:10%;   
        margin-top:145%;
      
    }
    
     .wenwen{
         position: relative;
         color:#339933;
         font-size:130%;
         margin-top:-30%;
         margin-left:-40%;
     }

    .xuekeke{
        position:relative;
        color: #339933;
        margin-top:60%;
        font-size:190%;
        margin-right:3%;
        letter-spacing: 1px;
    }

    .guanguan{
        position: relative;
        color:#339933;
       
        margin-top:10%;
        margin-left:-15%;
    }

    .jiajia{
        width: 90%;
        color:#339933;
        float: right;
        height: 20px;
    }

     .xiabiao{
        position:relative;
        color:gray;
        margin-top:16%;
        font-size: 80%;
        margin-left:60%;
       
    }
</style>